<!--
 * @Description: 账户明细
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-03-11
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-04-03
-->
<script lang="ts" setup>
  import { onMounted, reactive, ref, watch } from 'vue'

  import { requestOrderPage } from '/@/api/business/datamarket/order'
  import { CoinTypeDesc, TransferTypeDesc } from '/@/api/business/datamarket/order/enum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  /** 搜索条件 */
  const searchParam = reactive({
    /** 账单类型 */
    transferType: null,
    /** 开始时间 */
    startTime: '',
    /** 结束时间 */
    endTime: '',
    /** 用户名称 */
    accountName: '',
  })

  /** 搜索条件-开始时间、结束时间 */
  const searchParamTimes = ref([])

  watch(
    () => searchParamTimes.value,
    (val) => {
      searchParam.startTime = val.length > 0 ? `${val[0]} 00:00:00` : ''
      searchParam.endTime = val.length > 0 ? `${val[1]} 23:59:59` : ''
    },
  )

  /** 搜索条件下拉项 */
  const searchOptions = reactive({
    /** 账单类型 */
    transferType: Object.entries(TransferTypeDesc).map((item) => ({ value: item[0], label: item[1] })),
  })

  /** 表格列配置 */
  const columns = [
    { title: '订单号', dataIndex: 'orderNo' },
    { title: '用户姓名', dataIndex: 'accountName' },
    { title: '交易时间', dataIndex: 'orderTime' },
    { title: '类型', dataIndex: 'transferType', customRender: ({ value }) => TransferTypeDesc[value] ?? '--' },
    { title: '币种', dataIndex: 'coinType', customRender: ({ value }) => CoinTypeDesc[value] ?? '--' },
    { title: '金额', dataIndex: 'orderTotal' },
    { title: '详情', dataIndex: 'transferNotes' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<OrderPageTypes.IRequest, OrderPageTypes.IResponse[]>(searchParam, requestOrderPage)

  onMounted(() => queryList())

  /**
   * 重置
   */
  const clear = () => {
    searchParam.transferType = null
    searchParamTimes.value = []
    searchParam.accountName = ''
  }

  /**
   * 搜索
   */
  const search = async () => {
    queryList({ current: 1 })
  }
</script>

<template>
  <div class="ssc-list account-detail-list">
    <div class="ssc-search">
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="账单类型">
            <a-select v-model:value="searchParam.transferType" :options="searchOptions.transferType" placeholder="全部" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="日期">
            <a-range-picker v-model:value="searchParamTimes" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="用户姓名">
            <a-input v-model:value="searchParam.accountName" @press-enter="queryList" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-row justify="end">
            <a-button @click="clear()">重置</a-button>
            <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
          </a-row>
        </a-col>
      </a-row>
    </div>
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">账户明细</span>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange" />
    </div>
  </div>
</template>

<style lang="less" scoped></style>
